<template>
  <div>
    <el-card>
      <el-row>
        <el-button type="danger" @click="dialogVisible=true">添加工作模式</el-button>
      </el-row>

        <el-table :data="tableData" stripe>
          <el-table-column label="工作模式编号" prop="id" />
          <el-table-column label="工作模式" prop="name" />
          <el-table-column label="类型" prop="workPatternTypeDesc" />
          <el-table-column label="工作日期" prop="workDate" />
          <el-table-column label="工作时间" prop="workEndMinute1">
            <template #default="{row}">
              <el-row v-if="row.workEndMinute1===1380">23.00小时</el-row>
              <el-row v-else-if="row.workEndMinute1===1260">12.00小时</el-row>
              <el-row v-else>9.00小时</el-row>
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template #default="{row}">
<!--              <el-row>{{row.id}}</el-row>-->
              <el-button type="text" size="small" style="color: #8cd2ff" @click="edit(row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="del">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

    </el-card>

<!--    dialog对话框-->
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleClick">
<!--                              礼拜制-->
        <el-tab-pane label="礼拜制" name="first">
          <el-form :model="formlist" :rules="formRules">
            <el-row>
             <el-form-item label="工作模式名称：" label-width="150px" prop="formInput">
                <el-input v-model="formlist.formInput" placeholder="请填写工作模式名称"></el-input>
             </el-form-item>
              <el-form-item label="连续工作天数：" label-width="150px" prop="checkList">
<!--                复选框-->
                <el-checkbox-group v-model="formlist.checkList" @change="checkboxchange">
                  <el-checkbox label="周一"></el-checkbox>
                  <el-checkbox label="周二"></el-checkbox>
                  <el-checkbox label="周三"></el-checkbox>
                  <el-checkbox label="周四"></el-checkbox>
                  <el-checkbox label="周武"></el-checkbox>
                  <el-checkbox label="周六"></el-checkbox>
                  <el-checkbox label="周日"></el-checkbox>
                </el-checkbox-group>
                <div class="big">选中为工作时间，未选中为休息时间</div>
              </el-form-item>
              <el-form-item label="工作时间:" label-width="150px" prop="value1">
                <el-time-picker
                  is-range
                  v-model="formlist.value1"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
<!--                              连续制-->
        <el-tab-pane label="连续制" name="second" v-if="show">
          <el-form>
            <el-form-item label="工作模式名称：" label-width="150px" prop="formInput">
              <el-input v-model="formlist.formInput" placeholder="请填写工作模式名称"></el-input>
            </el-form-item>
                  <el-row>
                    <el-form-item label="连续工作天数" label-width="150px">
                     上<el-input style="width: 100px;margin-left: 15px;margin-right: 15px;margin-left: 15px" placeholder="请输入"/>休<el-input style="width: 100px" placeholder="请输入"/>
                    </el-form-item>
                  </el-row>
            <el-form-item label="工作时间:" label-width="150px" prop="value1">
              <el-time-picker
                is-range
                v-model="formlist.value1"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-row type="flex" justify="center">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { workModeDetail, workModePage } from '@/api/workArrange'

export default {
  name: 'workArrange-setting',
  data () {
    return {
      tableData: [],
      page: {
        page: 1,
        pageSize: 10
      },
      dialogVisible: false,
      activeName: 'first',
      formlist: {
        checkList: [],
        formInput: '',
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      },
      formRules: {
        formInput: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' }
        ],
        checkList: [
          { required: true, message: '请选择连续工作天数', trigger: 'change' }
        ],
        value1: [
          { required: true, message: '请选择工作时间', trigger: 'change' }
        ]
      },
      show: true, // 连续制的显示隐藏
      id: ''
    }
  },
  created () {
    this.getWorkPatternList()
  },
  computed: {
    // return  this.id? name='编辑工作模式':name='新增工作模式'
    name () {
      return this.id ? '编辑工作模式' : '新增工作模式'
    }
  },
  methods: {
    // 工作模式分页查询
    async getWorkPatternList () {
      const res = await workModePage(this.page)
      console.log(res)
      this.tableData = res.data.items
    },
    // 删除
    async del () {
      await this.$confirm('确定要删除吗')
      this.$message.error('演示，不能删除')
    },
    handleClose () {
      this.dialogVisible = false
      this.show = true
      this.activeName = 'first'
    },
    handleClick () {
      console.log('点击了')
    },
    // 点击编辑
    async edit (id) {
      this.dialogVisible = true
      this.show = false
      const res = await workModeDetail(id)
      console.log(res)
      this.id = res.data.id
      this.formlist.formInput = res.data.name
      // this.formlist.checkList = res.data.workDate
      // console.log(this.formlist.checkList)
    },
    // 复选框选中
    checkboxchange (val) {
      console.log(val)
    }
  }
}
</script>
<style>
.big{
  /*margin-left: 130px;*/
  /*margin-bottom: 14px;*/
  color: #bac0cd;
}
</style>
